<template>
  <div>
    <el-form label-width="120px" label-position="right" ref="form" :rules="rule" :model="form">
      <div class="g-card">
        <div class="card-title" style="display: inline-block">群人数设置</div>
        <el-form-item label="工作群" prop="privateRoomMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.privateRoomMax"
            placeholder="请输入工作群最大人数设置"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
        <el-form-item label="公开群" prop="publicRoomMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.publicRoomMax"
            placeholder="请输入公开群最大人数设置"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
        <el-form-item label="会议群" prop="chatRoomMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.chatRoomMax"
            placeholder="请输入会议群最大人数设置"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
        <el-form-item label="社群" prop="communityRoomMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.communityRoomMax"
            placeholder="请输入社群最大人数设置"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
      </div>

      <div class="g-card">
        <div class="card-title" style="display: inline-block">群管理员人数设置</div>
        <el-form-item label="管理员人数" prop="roomManagerMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.roomManagerMax"
            placeholder="请输入最大管理员人数"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
      </div>

      <div class="g-card">
        <div class="card-title" style="display: inline-block">语音时长设置(单位：秒)</div>
        <el-form-item label="语音时长" prop="audioTimeMax">
          <el-input
            :disabled="isDetail"
            type="number"
            v-model="form.audioTimeMax"
            placeholder="请输入语音时长"
            style="width: 400px"
            show-word-limit
            maxlength="30" />
        </el-form-item>
      </div>
    </el-form>
    <div class="g-footer-sticky">
      <!-- <el-button plain @click="cancel">取消</el-button> -->
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import BaiduMap from '@/components/common/BaiduMap'
// import SelectStaffQrCode from '@/components/SelectStaffQrCode'

import { getProCityList } from '@/api/common'
import { systemSettingDetail, saveSystemSetting } from '@/api/drainageCode/pullNews'
// import { addOrUpdateStore, storeDetail } from '@/api/drainageCode/store'
export default {
  name: 'store-add',
  props: {
    isDetail: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    BaiduMap,
    // SelectStaffQrCode,
    FormAutoCreateGroup: defineAsyncComponent(() => import('@/components/FormAutoCreateGroup.vue')),
  },
  data() {
    return {
      areaArray: [],
      current: {
        province: '',
        city: '',
        area: '',
      },
      form: {
        audioTimeMax: '',
        chatRoomMax: '',
        communityRoomMax: '',
        privateRoomMax: '',
        publicRoomMax: '',
        roomManagerMax: '',
        id: ''
      },
      addGroupCode: {},
      selectedUserList: [],
      dialogVisibleSelectUser: false,
      dialogVisibleSelectGroup: false,
      selectedCodeList: [],
      cityTree: [],
      props: {
        label: 'name',
        value: 'name',
      },
      rule: {
        storeName: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        area: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
        address: [{ required: true, message: '请选择详细地址', trigger: 'blur' }],
      },
    }
  },
  computed: {
    isDetail() {
      return this.$route.path.endsWith('detail')
    },
  },
  created() {
    systemSettingDetail().then(({ data }) => {
      console.log("系统配置 = ", data);
      this.form = data || {}
    })
  },
  methods: {
    // handleRemove() {
    //   this.form.shopGuideUrl = ''
    //   this.form.shopGuideId = ''
    //   this.form.shopGuideName = ''
    // },
    getPoint(addrPoint) {
      this.form.longitude = addrPoint.lng.toString()
      this.form.latitude = addrPoint.lat.toString()
    },
    handleChange(data) {
      if (data.address) {
        this.form.address = data.address
        this.form.area = data.province + data.city + data.area
        if (data.province) {
          this.areaArray = [data.province, data.city, data.area]
        }
        this.form.longitude = data.addrPoint.lng.toString()
        this.form.latitude = data.addrPoint.lat.toString()
      }
    },
    handleTree(data) {
      this.form.area = this.areaArray.join('')
      this.form.address = ''
      this.form.longitude = ''
      this.form.latitude = ''
    },
    switchFn() {
      if (!this.addGroupCode.groups?.length && !this.form.users?.length) {
        this.msgError('开启门店必须要求导购人员或群活码至少设置一项')
        return false
      }
      return true
    },
    submit() {
      // if (this.form.storeState == 0) {
      //   if (!this.addGroupCode.groups?.length && !this.form.users?.length) {
      //     this.msgError('门店状态开启时必须要求导购人员或群活码至少设置一项')
      //     return
      //   }
      // }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))

          console.log("11111111111", form);
          this.$store.loading = true
          saveSystemSetting(form)
            .then((res) => {
              this.msgSuccess('操作成功', res)
            })
            .finally(() => {
              this.$store.loading = false
            })
        }
      })
    },
    cancel() {
      this.$confirm(`是否确认取消${this.$route.query.id ? '编辑' : '新建'}？取消后不可恢复，请谨慎操作。`)
        .then(() => {
          this.$router.back()
        })
        .catch(function () {})
    },
    setDetail() {
      if (this.form.groupCodeId) {
        this.selectedCodeList[0] = { id: this.form.groupCodeId }
      }
      if (this.form.area) {
        let reg = /.+?(省|市|自治区|自治州|县|区|旗)/g
        let arr = this.form.area.match(reg)
        this.areaArray = arr
      }
      if (this.form.shopGuideId) {
        this.selectedUserList = []
        let idList = this.form.shopGuideId.split(',')
        let nameList = this.form.shopGuideName.split(',')
        let arr = []
        idList.forEach((dd, index) => {
          arr.push({ name: nameList[index], userId: dd })
        })
        this.selectedUserList = [...arr]
        // this.$forceUpdate()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.card-title {
  font-size: 16px;

  font-weight: 500;
  color: var(--font-black);
  margin-bottom: 20px;
}
</style>
